<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.one {
				position: absolute;
				background-image: url(grwz/img/22.jpg);
				height: 750px;
				width: 100%;

			}

			body {
				position: relative;
			}

			.name {
				height: 180px;
				width: 180px;
				position: relative;
				border-radius: 50%;
				text-align: center;
				line-height: 80px;
				
			}
			.name img{
				position: absolute;
				left: 43px;
				top: 20px;
				width: 180px;
				height: 180px;
				border-radius: 50%;
				
			}
			.name p{
				position: absolute;
				font-size: 24px;
				color: #fff;
				top: 160px;
				left: 98px;
			}
			.test {
				width: 1000px;
				height: 500px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
			}

			ul,
			li,
			ol {
				list-style-type: none;
			}

			a {
				text-decoration: none;
			}

			.test>ul>li {
				float: left;
				width: 150px;
				height: 150px;
				background-color: #DDDDDD;
				border-radius: 50%;
				
				margin-top: 30px;
				margin-left: 20px;
			}

			.test>ul>li>a {
				line-height: 150px;
				padding-left: 47px;
				font-size: 20px;
				color: #000;
			}
		</style>
	</head>
	<body>
		<div class="one">
			<div class="name">
				<p>冯盈宇</p>
				<img src="grwz/img/fff.jpg" >
			</div>
			<div class="test">
				<ul>
					<li><a href="导航栏/index2.html">任务一</a></li>
					<li><a href="小米商城/index3.html">任务二</a></li>
					<li><a href="#">任务三</a></li>
					<li><a href="#">任务四</a></li>
					<li><a href="#">任务五</a></li>
					<li><a href="#">任务六</a></li>
					<li><a href="#">任务七</a></li>
					<li><a href="#">任务八</a></li>
					<li><a href="#">任务九</a></li>
					<li><a href="#">任务十</a></li>
				</ul>
			</div>

	</body>
</html>
